<script setup>
  import { toRef, ref } from 'vue'
  import { uniqueId } from '@/helpers/utils'
  import { useField } from 'vee-validate'

  import tinymce from 'tinymce'
  import 'tinymce/themes/silver'
  /* Default icons are required for TinyMCE 5.3 or above */
  import 'tinymce/icons/default'
  // Any plugins you want to use has to be imported
  import 'tinymce/plugins/lists'
  import 'tinymce/plugins/advlist'
  import 'tinymce/plugins/paste'
  import 'tinymce/plugins/searchreplace'
  import 'tinymce/plugins/visualblocks'
  import 'tinymce/plugins/fullscreen'
  import Editor from '@tinymce/tinymce-vue'

  import FieldErrorMessage from './FieldErrorMessage.vue'
  import InputLabel from './InputLabel.vue'

  const props = defineProps({
    name: { type: String, required: true },
    label: { type: String, default: '' },
    value: { type: [String, Number, Date], default: '' },
    ariaLabel: { type: String, default: '' },
    placeholder: { type: String, default: '' },
    description: { type: String, default: '' },
    required: { type: Boolean, default: false },
    css_class: { type: String, default: '' },
    editable: { type: Boolean, default: true },
  })
  const emits = defineEmits(['changeValue', 'blurValue'])
  const tagId = uniqueId(props.name)

  const nameRef = toRef(props, 'name')
  const textarea = ref(null)
  // On récupère le schéma du formulaire parent
  const { value, errorMessage, handleBlur, handleChange, meta } =
    useField(nameRef)
  function onFieldChange(event, editor) {
    handleChange(event)
    emits('changeValue', editor.getContent())
  }

  function onFieldBlur(event, editor) {
    handleBlur(event)
    emits('blurValue', editor.getContent())
  }

  // Following block is kept in sync manually with js_sources/src/widgets/TextAreaWidget.js
  let skin = 'oxide'
  if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
    skin = 'oxide-dark'
  }
  let options = {
    body_class: 'form-control',
    theme_advanced_toolbar_location: 'top',
    theme_advanced_toolbar_align: 'left',
    width: '100%',
    //height: "auto",
    language: 'fr_FR',
    skin_url: '/fanstatic/fanstatic/js/build/tinymce-assets/skins/ui/' + skin,
    language_url: '/fanstatic/fanstatic/js/build/tinymce-assets/langs/fr_FR.js',
    content_css:
      '/fanstatic/fanstatic/js/build/tinymce-assets/skins/ui/' +
      skin +
      '/content.css',
    plugins: 'lists advlist searchreplace visualblocks fullscreen paste',
    theme_advanced_resizing: true,
    theme: 'silver',
    skin: skin,
    strict_loading_mode: true,
    mode: 'none',
    convert_fonts_to_spans: true,
    paste_as_text: true,
    toolbar:
      'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | ' +
      'bullist numlist outdent indent | link image | print preview media fullpage | ' +
      'forecolor backcolor emoticons | fontsizeselect',
    fontsize_formats: '6pt 8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt 48pt',
    menubar: 'edit view insert format tools table',
    browser_spellcheck: true,
  }
</script>
<template>
  <div
    class="form-group String"
    :class="{ 'has-error': meta.touched && !!errorMessage }"
  >
    <InputLabel :tagId="tagId" :required="required" :label="label" />
    <Editor
      class="form-control"
      :class="css_class"
      :aria-label="ariaLabel"
      :placeholder="placeholder"
      :name="name"
      :id="tagId"
      :init="options"
      v-model="value"
      :disabled="!editable"
      :required="required"
      @blur="onFieldBlur"
      @keyup="onFieldChange"
    />
    <div class="help-block" v-if="description" v-html="description" />
    <FieldErrorMessage
      v-if="meta.touched && !!errorMessage"
      :message="errorMessage"
    />
  </div>
</template>
